<!--商家管理-->
<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isCheckbox="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
    <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:TRADER:ADD')" @click.prevent="traderModal_open()">新增商家</a>
        <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:TRADER:ENABLE')" @click.prevent="enable_confirm()">启用</a>
        <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:TRADER:DISABLE')" @click.prevent="disable_comfirm()">禁用</a>
        <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:TRADER:IMPORT')" @click.prevent="importData()">导入</a>
        <a class="ake_btn ake_btn_text" v-if="isPermmited('TRADER_COUPON:TRADER:EXPORT')" @click.prevent="exportData()">导出</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" width="200" class-name="operateCell">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="icon-edit" class="ake-icon-font" title="编辑" v-if="isPermmited('TRADER_COUPON:TRADER:MODIFY')" @click="traderModal_edit(scope.row,1)" plain></el-button>

            <el-button size="small" type="primary" icon="icon-sm_normal" class="ake-icon-font" title="售卖" :disabled="scope.row.status=='未启用'" plain @click="toSell(scope.row)"></el-button>

            <el-button size="small" type="primary" icon="icon-more" class="ake-icon-font" title="更多设置" @click="traderModal_edit(scope.row,2)" plain></el-button>

            <el-button size="small" type="primary" icon="icon-gjpz_normal" class="ake-icon-font" title="购买配置" :disabled="!onlineSaleStatus" @click="traderModal_edit(scope.row,4)" plain></el-button>

            <el-button title="重置密码" size="small" type="primary" icon="icon-password" class="ake-icon-font" @click="traderModal_edit(scope.row,3)" plain></el-button>

            <el-button size="small" type="danger" icon="icon-delete" class="ake-icon-font" title="删除" v-if="isPermmited('TRADER_COUPON:TRADER:DELETE')" @click="deleteTrader(scope.row)" plain></el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!--至少选择一项-->
    <basic-modal ref="voidTipModal" bodyTxt="请至少选择一项">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('voidTipModal')">关闭</button>
      </div>
    </basic-modal>

    <!--导入-->
    <basic-modal ref="importModal" width="600" customeClass="import-modal" static="true">
      <h3 slot="title">批量导入商家</h3>
      <div class="modal-body" slot="modal-body">
        <el-form ref="importForm" :model="importFile" :rules="importRules" label-position="left" label-width="160px">
          <el-form-item label="下载模板">
            <a style="color: rebeccapurple;" class="text-btn ake-text-btn" href="javascript:;" @click="downloadTmp()">批量导入商家模板.xls</a>
          </el-form-item>

          <el-form-item label="选择文件" prop="importFile">
            <input type="file" @change="getFile($event)" class="first-item file-input">
            <p class="help-block">支持.xls格式，大小不超过2.0M</p>
          </el-form-item>

          <el-form-item v-if="importResult && importResult.processedCount!=importResult.totalCount" label="导入结果">
            <span v-if="importResult.processedCount!=importResult.totalCount">共{{importResult.totalCount}}条记录，失败记录{{importResult.failCount}}条</span>
          </el-form-item>
          <!-- <el-form-item v-if="importResult && importResult.processedCount==importResult.totalCount" label="上次处理结果">
              <span v-if="importResult.successCount==importResult.totalCount">共{{importResult.totalCount}}张月票,全部成功(提示保留一天)</span>
              <span v-if="importResult.errorFileName">共{{importResult.totalCount}}张月票,失败{{importResult.failCount}}张,请下载失败文件,保留一天</span>
            </el-form-item> -->

          <el-form-item label="上次失败文件下载" v-if="importResult&&importResult.errorFileName">
            <a style="color: red;" class="text-btn ake-text-btn text-btn_red" @click="downloadError()" href="javascript:;" v-text="importResult.errorFileName"></a>
          </el-form-item>

          <div class="import-notice">
            <span class="">
              <h5>温馨提示：请按照以下步骤进行导入</h5>
              <p>1.请先下载模板文件，严格按照模板文件格式进行填写，不可更改文件格式.</p>
              <p>2.模板文件填写完成后，浏览选择文件，然后点击上传。</p>
              <p>3.如果上传失败，请下载失败文件，并注意失败原因的提示。重新填写上传。</p>
            </span>
          </div>

        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="sureImport($event)">确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('importModal')">取消</button>
      </div>
    </basic-modal>

    <!--重置密码-->
    <basic-modal ref="pwdFormModal" width="600" static="true">
      <h3 slot="title">修改密码【{{traderModalData.basicData.name}}】</h3>
      <div class="modal-body" slot="modal-body">
        <el-form ref="trader_form" :model="traderModalData.basicData" :rules="traderRules" label-position="left" label-width="70px">
          <el-form-item prop="password" label="登录密码">
            <el-input type="password" v-model="traderModalData.basicData.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPassword" label="确认密码">
            <el-input type="password" v-model="traderModalData.basicData.confirmPassword" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click.stop="traderModal_save('pwdFormModal')">确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('pwdFormModal')">取消</button>
      </div>
    </basic-modal>

    <!--新增商家-->
    <basic-modal ref="traderModal" width="700" customeClass="trader-row-modal" static="true">
      <h3 slot="title" v-if="traderstatus=='new'">新增商家</h3>
      <h3 slot="title" v-else>{{(traderstatus=="basicInfo" ? "基础信息" : (traderstatus=="shoppingSetup" ? "购买配置" : '更多设置'))}}-{{traderModalData.basicData.name}}</h3>
      <div class="modal-body" :class="{hadStepModal:traderstatus=='new'}" slot="modal-body">
        <div class="btnGroup" v-if="traderstatus=='new' && onlineSaleStatus">
          <div @click="toggleTab('basicTab')" class="btnItem" :class="{activeText:traderModalData.tabName=='basicTab'}">
            <span class="step-icon" :class="{activeTab:traderModalData.tabName=='basicTab'}">1</span>
            <span class="step-text">基础信息</span>
          </div>
          <div @click="toggleTab('higherTab')" class="btnItem" :class="{activeText:traderModalData.tabName=='higherTab'}">
            <span class="step-icon" :class="{activeTab:traderModalData.tabName=='higherTab'}">2</span>
            <span class="step-text">购买配置</span>
          </div>
        </div>
        <!-- 基本信息and购买配置 -->
        <el-form ref="trader_form" :model="traderModalData.basicData" :rules="traderRules" label-position="left" label-width="100px" v-if="traderModalStatus==1 || traderModalStatus==4" :class="{hadPadding:traderstatus=='new'}" style="padding: 30px 0; width: 500px">
          <div v-show="traderModalData.tabName=='basicTab'" class="basicTab-box">
            <el-form-item prop="name" label="商家名称">
              <el-input v-model="traderModalData.basicData.name" placeholder="请输入商家名称"></el-input>
            </el-form-item>

            <el-form-item prop="parkId" label="所属车场">
              <el-select v-model="traderModalData.basicData.parkId" @change="selectParkingLot" placeholder="请选择停车场" popper-class="select-search-filter">
                <el-option v-for="pitem in parkingLotList" :key="pitem.parkUid" :label="pitem.name" :value="pitem.parkUid">
                  <el-tooltip placement="bottom-start" style="float:left;" v-if="pitem.area">
                      <div slot="content">
                        <span>{{ pitem.area }}</span>
                      </div>
                    <span class="grayTip">{{ pitem.topArea }}</span>
                  </el-tooltip>
                  <span v-else class="grayTip" style="float:left;">{{ pitem.topArea }}</span>
                  <p style="float:left;">{{ pitem.name }}</p>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="defaultType" label="商家类型">
              <el-select v-model="traderModalData.basicData.defaultType">
                <el-option label="美食" value="美食"></el-option>
                <el-option label="酒店" value="酒店"></el-option>
                <el-option label="休闲娱乐" value="休闲娱乐"></el-option>
                <el-option label="生活服务" value="生活服务"></el-option>
                <el-option label="购物" value="购物"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="otherType" label="自定义类型" v-if="traderModalData.basicData.defaultType=='其他'">
              <el-input v-model="traderModalData.basicData.otherType"></el-input>
            </el-form-item>
            <el-form-item prop="contact" label="联系人">
              <el-input v-model="traderModalData.basicData.contact" placeholder="请输入联系人名称"></el-input>
            </el-form-item>
            <el-form-item prop="tel" label="联系人电话">
              <el-input v-model="traderModalData.basicData.tel" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <div class="password" v-if="traderstatus=='new'?true:false">
              <el-form-item prop="password" label="登录密码">
                <el-input type="password" v-model="traderModalData.basicData.password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item prop="confirmPassword" label="确认密码">
                <el-input type="password" placeholder="请输入密码" v-model="traderModalData.basicData.confirmPassword"></el-input>
              </el-form-item>
            </div>
          </div>
          <div v-show="traderModalData.tabName=='higherTab' && onlineSaleStatus" class="higherTab-box couponList-chunk">
            <p>请选择可线上购买的优惠券</p>
            <div style="margin-top: 15px;">
              <el-input placeholder="请输入优惠券名称" v-model.trim="traderModalData.shoppingSetup.couponName" @change="searchCouponKeyWord">
                <!-- <template slot="prepend">优惠券</template> -->
                <el-button slot="append" icon="el-icon-search" @click.prevent="searchCouponKeyWord()"></el-button>
              </el-input>
            </div>
            <div class="couponList-box vertical">
              <template>
                <el-checkbox :indeterminate="uiOpt.isIndeterminate" v-model="uiOpt.checkAll" @change="handleCheckAllChange">优惠券 ({{traderModalData.shoppingSetup.checkedCoupons.length}})</el-checkbox>
                <el-checkbox-group v-model="traderModalData.shoppingSetup.checkedCoupons" @change="handleCheckedChange">
                  <el-checkbox v-for="item in traderModalData.shoppingSetup.couponList" :label="item.id" :value="item.id" :key="item.id" v-if="!item.isHidden">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </template>
            </div>
          </div>
        </el-form>
          <!-- 更多设置 -->
        <p class="form-tip" v-if="traderModalStatus==2">图片／地址／链接添加后，能在一点停-发现-智慧商户里展示</p>
        <el-form ref="trader_form" :model="traderModalData.superiorData" :rules="traderRules" label-position="left" label-width="110px" v-if="traderModalStatus==2">
          <el-form-item prop="" label="商家图片">
            <input type="file" class="file-input" id='traderpic' name="traderpic"></input>
            <img v-if="picShow" :src="picShow" class="ticket-pic" alt="">
          </el-form-item>
          <el-form-item prop="address" label="商家地址">
            <el-input type="textarea" v-model="traderModalData.superiorData.address"></el-input>
          </el-form-item>
          <el-form-item prop="traderUrl" label="商家链接">
            <el-input v-model="traderModalData.superiorData.traderUrl"></el-input>
          </el-form-item>
          <el-form-item prop="isLimitBuy" label="限制购买">
            <template>
              <el-radio v-model="traderModalData.superiorData.isLimitBuy" :label="1">限制</el-radio>
              <el-radio v-model="traderModalData.superiorData.isLimitBuy" :label="0">不限制</el-radio>
            </template>
            <div class="tipsBox" v-show="traderModalData.superiorData.isLimitBuy==1">
              <i class="el-icon-question"></i>
              <div class="tips bottom">
                <p>限制购买：用于限制商家购买优惠券（全类目）的数量</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="maxBuyNum" label="限制数量" v-if="traderModalData.superiorData.isLimitBuy===1">
            <el-input v-model="traderModalData.superiorData.maxBuyNum"></el-input>
          </el-form-item>
          <el-form-item prop="userCount" label="发放员数量">
            <el-input v-model="traderModalData.superiorData.userCount"></el-input>
          </el-form-item>
          <el-form-item prop="supportFixedQr" label="固定二维码发券">
            <el-checkbox v-model="traderModalData.superiorData.supportFixedQr" v-bind:true-label="1" v-bind:false-label="0">支持</el-checkbox>
          </el-form-item>
          <el-form-item prop="grantMethod" label="发券方式">
            <template>
              <el-radio v-model="traderModalData.superiorData.grantMethod" :label="0">商家发券</el-radio>
              <el-radio v-model="traderModalData.superiorData.grantMethod" :label="1">中央发券</el-radio>
            </template>
            <div class="tipsBox">
              <i class="el-icon-question"></i>
              <div class="tips bottom">
                <p>商家发券：</p>
                <p>车主在中央领券后，不能马上在页面上缴费</p>
                <p style="margin-top:10px;">中央发券：</p>
                <p>车主在商家扫码领券后，能在页面立即缴费</p>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer" v-if="traderstatus=='new' && onlineSaleStatus">
        <button class="ake_btn ake_btn_text ake_btn_confirm" v-if="traderModalData.tabName=='higherTab'" @click.stop="traderModal_save('traderModal')">确认</button>
        <button v-if="traderModalData.tabName=='higherTab'" class="ake_btn ake_btn_text" @click="toggleTab('basicTab')"><i class="el-icon-arrow-left"></i>上一步</button>
        <button v-if="traderModalData.tabName=='basicTab'" class="ake_btn ake_btn_text ake_btn_confirm" @click="toggleTab('higherTab')">下一步<i class="el-icon-arrow-right el-icon--right"></i></button>
        <button v-if="traderModalData.tabName=='basicTab'" class="ake_btn ake_btn_text modal-close" @click="closed('traderModal')">取消</button>
      </div>
      <div class="modal-footer" slot="modal-footer" v-else>
        <button class="ake_btn ake_btn_text ake_btn_confirm" v-if="traderModalStatus==4" @click.stop="traderModal_save_shooppingSetup('traderModal')">确认</button>
        <button class="ake_btn ake_btn_text ake_btn_confirm" v-else @click.stop="traderModal_save('traderModal')">确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('traderModal')">取消</button>
      </div>
    </basic-modal>

    <!--选择停车场树-->
    <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">选择停车场</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button type="button" class="ake_btn ake_btn_text ake_btn_confirm" @click="selectParkSure()">确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal')">取消</button>
      </div>
    </basic-modal>

    <SellManageComponent ref="sellManageComponent" @getItemList="getItemList"></SellManageComponent>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import trader from "./js/trader.js";

import sellManageComponent from "./sellManageComponent/sellManageComponent.vue";

export default {
  name: 'couponTrader',
  mixins: [common, stardardList, invokeModal, trader],
  components: {
    SellManageComponent: sellManageComponent
  },
  data() {
    return {
      paramName: 'query_parkId',
      total: 0,
      fixedCols: 3,
      traderpic: "",
      //导入
      importResult: "",
      importFile: {
        importFile: ""
      },
      importRules: {},
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "text",
          name: "name",
          text: "商户名称",
          value: ""
        },
        {
          index: 1,
          isShow: false,
          type: "select",
          name: "status",
          text: "商户状态",
          value: "",
          options: [
            { name: "--全部--", value: "" },
            { name: "未启用", value: "0" },
            { name: "启用", value: "1" },
            { name: "冻结", value: "2" }
          ]
        },
      ],
      theadsInfo: [
        {
          index: 1,
          isShow: false,
          prop: "name",
          text: "商家名称",
          minWidth: 50
        },
        { index: 2, isShow: false, prop: "status", text: "状态", minWidth: 40 },
        { index: 3, isShow: false, prop: "parkName", text: "所属停车场", minWidth: 40 },
        {
          index: 4,
          isShow: false,
          prop: "contact",
          text: "联系人",
          minWidth: 50
        },
         {
          index: 5,
          isShow: false,
          prop: "tel",
          text: "联系电话",
          minWidth: 60
        },
         {
          index: 6,
          isShow: false,
          prop: "sellNum",
          text: "累计已购买(张)",
          minWidth: 50
        },
        {
          index: 7,
          isShow: false,
          prop: "grantNum",
          text: "累计已发放(张)",
          minWidth: 50
        },
        {
          index: 8,
          isShow: false,
          prop: "type",
          text: "商家类型",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: "code",
          text: "商家编码",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "address",
          text: "商家地址",
          minWidth: 60,
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: "grantMethod",
          text: "发券方式",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 12,
          isShow: false,
          prop: "useNum",
          text: "累计被使用(张)",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 13,
          isShow: false,
          prop: "isLimitBuy",
          text: "是否限购",
          minWidth: 40,
          initHidden: true
        },
        {
          index: 14,
          isShow: false,
          prop: "expiredRefundNum",
          text: "累计逾期回收(张)",
          minWidth: 50,
          initHidden: true
        },
        {
          index: 15,
          isShow: false,
          prop: "refundNum",
          text: "累计已退(张)",
          minWidth: 50,
          initHidden: true
        },
        // {
        //   index: 9,
        //   isShow: false,
        //   prop: "userCountStr",
        //   text: "可建发放员数量(现有/总量)",
        //   minWidth: 60,
        //   initHidden: true
        // },
        {
          index: 16,
          isShow: false,
          prop: "supportFixedQr",
          text: "固定二维码发券",
          minWidth: 50,
          initHidden: true
        },  
        {
          index: 17,
          isShow: false,
          prop: "createTime",
          text: "创建时间",
          minWidth: 80,
          initHidden: true
        },
        {
          index: 18,
          isShow: false,
          prop: "modifyTime",
          text: "修改时间",
          minWidth: 80,
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  }
};
</script>

<style lang="css">
.vertical::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
	height: 1px;
}

.vertical::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px;
	background: #d4d4d4;
}
</style>

<style lang="less">
.couponList-chunk{
  width: 300px;
  margin: 0px auto;
  .el-input-group__prepend{
    overflow: hidden;
    font-size: 12px;
  }
  .el-icon-search{
    font-size: 15px;
    font-weight: bold;
    color: #c4c4c4;
  }
}
</style>

<style lang="less" scoped>
@import "../../assets/less/libs/zTreeStyle.css";
@import "../../assets/less/manage.less";

.hadPadding{
  padding: 20px 50px;
}

.form-tip{
  font-size: 12px;
  color: #999999;
  width: 90%;
  margin: 0px auto;
}

.ticket-pic {
  width: 90px;
}
</style>
